<template>
  <div class="_updateInfo boxShadow-white scroll" >
    <div class="closeBox"><svg t="1622123506916" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2345" width="20" height="20"><path d="M511.968 376.224 796.096 92.096C833.536 54.624 894.4 54.624 931.84 92.096 969.312 129.568 969.312 190.4 931.84 227.872L647.744 512 931.84 796.096C969.312 833.568 969.312 894.4 931.84 931.872 894.4 969.344 833.536 969.344 796.096 931.872L511.968 647.744 227.84 931.872C190.4 969.344 129.536 969.344 92.096 931.872 54.624 894.4 54.624 833.568 92.096 796.096L376.224 512 92.096 227.872C54.624 190.4 54.624 129.568 92.096 92.096 129.536 54.624 190.4 54.624 227.84 92.096L511.968 376.224Z" p-id="2346"></path></svg></div>
    <div id="musicUpdate" v-if="this.musicInfo" class="flex-column">
    <p>歌曲名</p>
    <input type="text" class="input-100" v-model="musicUpdate.musicName" >
    <p>歌曲英文名</p>
    <input type="text" class="input-100" v-model="musicUpdate.musicNameEn" >
    <p>类型</p>
    <input type="text" class="input-100" v-model="musicUpdate.musicGen" >
    <button class="button button-color-white" @click="updateMusic">保存</button>
  </div>
  </div>
</template>

<script>
    import $ from "jquery";

    export default {
        name: "updateMusic",
      props:['musicInfo'],
      data(){
          return{
          musicUpdate:{},
        }
      },
      watch:{
        musicInfo:function (val) {
          this.musicUpdate = val
        }
      },
      methods:{
        async updateMusic(){
          const {data:res} = await this.$axios.post('v1/updateMusicInfo',this.musicUpdate)
          if(res.code === 200){
            this.$message.success("更新成功")
          }
        },
      },
      mounted() {
        $(function () {
          $('.closeBox').click(function () {
            $('.updateInfo_').css('display','none')
          });
        })
      }
    }
</script>

<style lang="less" scoped>
  ._updateInfo {
    width: 500px;
    max-height: 600px;
    position: absolute;
    background-color: var(--theme-bgColor-aside-nav);
    z-index: +1;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 6px;
    padding: 20px;
    overflow-y: auto;
    .closeBox{
      width: 20px;
      height: 20px;
      /*background-color: black;*/
      position: absolute;
      right: 10px;
      top: 10px;
      transition: all 0.1s ease-in-out;
    }
    .closeBox:hover{
      fill: #9e5bdf;
    }
    input {
      margin-bottom: 20px;
    }

    p {
      margin-bottom: 5px;
      color: var(--theme-fontMain);
    }

    button {
      margin-top: 20px;
    }
  }
  .flex-column{
    display: flex;
    flex-flow: column;
  }
</style>
